<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .fa{
          height: 200px;
          width: 200px;
          border: 1px solid red;
          background-color: darkblue;
          position: relative;
      }
      .so{
          height: 50px;
          width: 50px;
          border: 1px solid blue;
          background-color: coral;
          /*第一种水平居中方法*/
          /* margin: 0 auto; */
          /*第二种水平居中方法*/
          position:absolute;
          left: 50%;
          transform: translate(-50%);
      }
      .gif{
          width: 200px;
          height: 200px;
          background-color: red;
          animation: move 5s ease infinite ;
      }
      @-webkit-keyframes move{
        0%{
            transform: translateX(0);
        }
        25%{
            transform: translate(500px);
        }
        50%{
            transform: translate(500px,500px);
        }
        75%{
            transform: translateY(500px);
        }
        100%{
            transform: translateY(0);
        }
      }
    </style>
</head>
<body>
    <div class="fa">
        <div class="so">

        </div>
    </div>
    <hr>
    <div class="gif">

    </div>
</body>
</html>